import { useEffect, useState } from "react";

const Premium = ({ address }) => {

  // 全国时使用的数据
  const testData = [
    {
      unitName: '广分',
      count: 2344,
      clic: '台风',
      money: 2233
    },
    {
      unitName: '浙分',
      count: 46,
      clic: '台风',
      money: 447
    },
    {
      unitName: '深圳',
      count: 5446,
      clic: '台风',
      money: 886
    },
    {
      unitName: '湖南',
      count: 3352,
      clic: '台风',
      money: 644
    },
  ]

  // 切换到某省的时候用的数据
  const test1Data = [

    {
      unitName: '深圳',
      count: 46,
      clic: '台风',
      money: 447
    },
    {
      unitName: '广分',
      count: 5446,
      clic: '台风',
      money: 886
    },
  ]

  const test2Data = [
    {
      unitName: '广分',
      count: 2344,
      clic: '台风',
      money: 2233
    },

  ]

  const [list, setList] = useState(testData);

  useEffect(() => {
    console.log("模板里监听到address", address);
    switch (address) {
      case "中国": setList(testData); break;
      case "广东省": setList(test1Data); break;
      default: setList(test2Data);
    }
  }, [address])

  return (
    <div style={{ width: '100%', padding: 10, height: '100%', }}>
      <div className="head"
        style={{ display: 'flex', border: 'none', borderBottom: '1px solid white', padding: '5px 0' }}
      >
        <div className="col" style={{ flex: 1, textAlign: 'center' }}>归属机构</div>
        <div className="col" style={{ flex: 1, textAlign: 'center' }}>应急事件</div>
        <div className="col" style={{ flex: 1, textAlign: 'center' }}>出险次数</div>
        <div className="col" style={{ flex: 1, textAlign: 'center' }}>估损金额</div>
      </div>
      <div className="list"  >
        {
          list.map((data, index) => {
            return <div className="item" style={{ display: 'flex' }} key={index}>
              <div style={{ flex: 1, padding: '5px 2px' }}>
                <div className="col" style={{ width: '100%', textAlign: 'center', border: 'none', borderRight: '1px solid white' }}>{data.unitName}</div>
              </div>
              <div style={{ flex: 1, padding: '5px 2px' }}>
                <div className="col" style={{ width: '100%', textAlign: 'center', border: 'none', borderRight: '1px solid white' }}>{data.clic}</div>
              </div>
              <div style={{ flex: 1, padding: '5px 2px' }}>
                <div className="col" style={{ width: '100%', textAlign: 'center', border: 'none', borderRight: '1px solid white' }}>{data.count}</div>
              </div>
              <div style={{ flex: 1, padding: '5px 2px' }}>
                <div className="col" style={{ width: '100%', textAlign: 'center' }}>{data.money}</div>
              </div>
            </div>
          })
        }

      </div>
    </div>
  );
};

export default Premium;
